<template>
  <div class="app-container Document-container nohead">
    <el-tabs tab-position="left" style="height:100%" v-model="activeTab">
      <el-tab-pane name="myWord">
        <span slot="label">
          <i class="icon-ym icon-ym-extend-folder-open" />我的文档</span>
        <div class="main JNPF-flex-main">
          <div class="JNPF-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item v-if="levelList.length>1">
                <a @click="jump(levelList[levelList.length-2],levelList.length-2)">返回上一级</a>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item,i) in levelList" :key="i">
                <span v-if="i+1>=levelList.length">{{item.fullName}}</span>
                <a v-else @click="jump(item,i)">{{item.fullName}}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="关键词">
                  <el-input v-model="keyword" placeholder="请输入关键词查询" clearable
                    @keyup.enter.native="search()" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()">
                    {{$t('common.search')}}</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
            <div class="JNPF-common-search-box-right">
              <el-button v-if="activeTab=='myWord'" @click="addFolder()">新建文件夹</el-button>
              <el-button v-if="activeTab=='myWord'" type="primary" icon="el-icon-upload2"
                @click="uploadFile()">上传文件
              </el-button>
              <el-button v-if="activeTab=='myWord'" type="primary" icon="el-icon-share"
                @click="shareFolder()">共享某人
              </el-button>
              <el-button v-if="activeTab=='myWord'" type="primary" icon="el-icon-s-custom"
                @click="shareFolderAll()">共享所有人
              </el-button>
              <el-button v-if="activeTab=='myWord'" type="primary" icon="el-icon-position"
                @click="startFile()">星标
              </el-button>
              <el-button v-if="activeTab=='myWord'" type="danger" @click="handleDel()">删除
              </el-button>

            </div>
          </el-row>
          <JNPF-table v-loading="listLoading" :data="list" @selection-change="handleSelectionChange"
            empty-text="该文件夹为空" size="mini">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="fullName" label="文件名">
              <template slot-scope="scope">
                <span v-if="scope.row.type">
                  <i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
                  {{scope.row.fullName}}
                </span>
                <span class='cursor-pointer' v-else @click="openFolder(scope.row)">
                  <i class='icon-ym icon-ym-extend-folder text-warning' />
                  {{scope.row.fullName}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="">
              <template slot-scope="scope">
                <span class='cursor-pointer' v-if="scope.row.isAsterisk=='1'">
                  <i class='el-icon-star-off' />
                  星标
                </span>
                <span class='cursor-pointer' v-if="scope.row.isShare=='1'">
                  <i class='el-icon-share' />
                  共享
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="90">
              <template slot-scope="scope">{{scope.row.fileTypNam}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" width="90">
              <template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="版本" width="90">
              <template slot-scope="scope">{{scope.row.version}}</template>
            </el-table-column>
            <el-table-column prop="lastModifyTime" label="修改日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorTime" label="创建日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorUserId" label="上传人员" width="90">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="300" align="reght">
              <template slot-scope="scope">
                <el-button size="mini" type="text" v-if="scope.row.type=='1'"
                  @click="handleDownLoad(scope.row.vid)" :disabled="!scope.row.type">下载</el-button>

                <el-button size="mini" type="text"
                  v-if="scope.row.type=='1'&&scope.row.editable=='1'"
                  @click="submitWork(scope.row.id)" :disabled="!scope.row.type">提审
                </el-button>

                <el-button size="mini" type="text"
                  v-if="scope.row.type=='1'&&scope.row.editable=='1'"
                  @click="editversion(scope.row.id)" :disabled="!scope.row.type">版本
                </el-button>

                <el-button size="mini" type="text" @click="getFolder(scope.row.id)"
                  :disabled="!scope.row.type">重命名</el-button>

                <el-button size="mini" type="text"
                  v-if="scope.row.type=='1'&&scope.row.editable=='1'"
                  @click="editFile(scope.row.vid)" :disabled="!scope.row.type">编辑
                </el-button>

                <el-button size="mini" type="text" @click="moveTo(scope.row.id,scope.row.parentId)"
                  :disabled="!scope.row.type">移动到
                </el-button>

              </template>
            </el-table-column>
          </JNPF-table>
          <pagination :total="total" :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize" @pagination="initData" />
        </div>
      </el-tab-pane>

      <el-tab-pane name="mysharePanel">
        <span slot="label">
          <i class="icon-ym icon-ym-extend-thumbs-up" />我共享的</span>
        <div class="main JNPF-flex-main">
          <div class="JNPF-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item v-if="levelList.length>1">
                <a @click="jump(levelList[levelList.length-2],levelList.length-2)">返回上一级</a>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item,i) in levelList" :key="i">
                <span v-if="i+1>=levelList.length">{{item.fullName}}</span>
                <a v-else @click="jump(item,i)">{{item.fullName}}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="文件名">
                  <el-input v-model="keyword" placeholder="搜索我的文件" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()">
                    {{$t('common.search')}}</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <JNPF-table v-loading="listLoading" :data="list" @selection-change="handleSelectionChange"
            empty-text="该文件夹为空" size="mini">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="fullName" label="文件名">
              <template slot-scope="scope">
                <span v-if="scope.row.type">
                  <i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
                  {{scope.row.fullName}}
                </span>
                <span class='cursor-pointer' v-else @click="openFolder(scope.row)">
                  <i class='icon-ym icon-ym-extend-folder text-warning' />
                  {{scope.row.fullName}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="90">
              <template slot-scope="scope">{{scope.row.fileTypNam}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" width="90">
              <template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="版本" width="90">
              <template slot-scope="scope">{{scope.row.version}}</template>
            </el-table-column>
            <el-table-column prop="lastModifyTime" label="修改日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorTime" label="创建日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorUserId" label="上传人员" width="90">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="70">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="JNPF-table-delBtn"
                  @click="unshare(scope.$index,scope.row.id)">取消共享</el-button>
              </template>
            </el-table-column>
          </JNPF-table>
          <pagination :total="total" :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize" @pagination="initData" />
        </div>
      </el-tab-pane>

      <el-tab-pane name="startPanel">
        <span slot="label">
          <i class="icon-ym icon-ym-extend-thumbs-up" />星标文件</span>
        <div class="main JNPF-flex-main">
          <div class="JNPF-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item v-if="levelList.length>1">
                <a @click="jump(levelList[levelList.length-2],levelList.length-2)">返回上一级</a>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item,i) in levelList" :key="i">
                <span v-if="i+1>=levelList.length">{{item.fullName}}</span>
                <a v-else @click="jump(item,i)">{{item.fullName}}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="文件名">
                  <el-input v-model="keyword" placeholder="搜索我的文件" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()">
                    {{$t('common.search')}}</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <JNPF-table v-loading="listLoading" :data="list" @selection-change="handleSelectionChange"
            empty-text="该文件夹为空" size="mini">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="fullName" label="文件名">
              <template slot-scope="scope">
                <span v-if="scope.row.type">
                  <i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
                  {{scope.row.fullName}}
                </span>
                <span class='cursor-pointer' v-else @click="openFolder(scope.row)">
                  <i class='icon-ym icon-ym-extend-folder text-warning' />
                  {{scope.row.fullName}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="90">
              <template slot-scope="scope">{{scope.row.fileTypNam}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" width="90">
              <template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="版本" width="90">
              <template slot-scope="scope">{{scope.row.version}}</template>
            </el-table-column>
            <el-table-column prop="lastModifyTime" label="修改日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorTime" label="创建日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorUserId" label="上传人员" width="90">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="70">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="JNPF-table-delBtn"
                  @click="unstartFile(scope.row.id)">取消星标</el-button>
              </template>
            </el-table-column>
          </JNPF-table>
          <pagination :total="total" :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize" @pagination="initData" />
        </div>
      </el-tab-pane>

      <el-tab-pane name="finshedPanel">
        <span slot="label">
          <i class="icon-ym icon-ym-extend-share" />已完结文件</span>
        <div class="main JNPF-flex-main">
          <div class="JNPF-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item v-if="levelList.length>1">
                <a @click="jump(levelList[levelList.length-2],levelList.length-2)">返回上一级</a>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item,i) in levelList" :key="i">
                <span v-if="i+1>=levelList.length">{{item.fullName}}</span>
                <a v-else @click="jump(item,i)">{{item.fullName}}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="文件名">
                  <el-input v-model="keyword" placeholder="搜索我的文件" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()">
                    {{$t('common.search')}}</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <JNPF-table v-loading="listLoading" :data="list" @selection-change="handleSelectionChange"
            empty-text="该文件夹为空" size="mini">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="fullName" label="文件名">
              <template slot-scope="scope">
                <span v-if="scope.row.type">
                  <i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
                  {{scope.row.fullName}}
                </span>
                <span class='cursor-pointer' v-else @click="openFolder(scope.row)">
                  <i class='icon-ym icon-ym-extend-folder text-warning' />
                  {{scope.row.fullName}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="90">
              <template slot-scope="scope">{{scope.row.fileTypNam}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" width="90">
              <template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="版本" width="90">
              <template slot-scope="scope">{{scope.row.version}}</template>
            </el-table-column>
            <el-table-column prop="lastModifyTime" label="修改日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorTime" label="创建日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorUserId" label="上传人员" width="90">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="50">
              <template slot-scope="scope">
                <el-button size="mini" v-if="scope.row.type=='1'" type="text"
                  @click="handleDownLoad(scope.row.vid)">下载
                </el-button>
              </template>
            </el-table-column>
          </JNPF-table>
          <pagination :total="total" :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize" @pagination="initData" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="共享空间" name="gxkj" :disabled='true'>共享空间</el-tab-pane>
      <el-tab-pane name="zybPanel">
        <span slot="label">
          <i class="icon-ym icon-ym-extend-trash" />资源包</span>
        <div class="main JNPF-flex-main">
          <div class="JNPF-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item v-if="levelList.length>1">
                <a @click="jump(levelList[levelList.length-2],levelList.length-2)">返回上一级</a>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item,i) in levelList" :key="i">
                <span v-if="i+1>=levelList.length">{{item.fullName}}</span>
                <a v-else @click="jump(item,i)">{{item.fullName}}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="文件名">
                  <el-input v-model="keyword" placeholder="搜索我的文件" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()">
                    {{$t('common.search')}}</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <JNPF-table v-loading="listLoading" :data="list" @selection-change="handleSelectionChange"
            empty-text="该文件夹为空" size="mini">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="fullName" label="文件名">
              <template slot-scope="scope">
                <span v-if="scope.row.type">
                  <i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
                  {{scope.row.fullName}}
                </span>
                <span class='cursor-pointer' v-else @click="openFolder(scope.row)">
                  <i class='icon-ym icon-ym-extend-folder text-warning' />
                  {{scope.row.fullName}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="90">
              <template slot-scope="scope">{{scope.row.fileTypNam}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" width="90">
              <template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="版本" width="90">
              <template slot-scope="scope">{{scope.row.version}}</template>
            </el-table-column>
            <el-table-column prop="lastModifyTime" label="修改日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorTime" label="创建日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorUserId" label="上传人员" width="90">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <!-- <template slot-scope="scope">
                <el-button size="mini" type="text" @click="recovery(scope.$index,scope.row.id)">
                  还原</el-button>
                <el-button size="mini" type="text" class="JNPF-table-delBtn"
                  @click="trashDel(scope.$index,scope.row.id)">删除</el-button>
              </template> -->
            </el-table-column>
          </JNPF-table>
          <pagination :total="total" :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize" @pagination="initData" />
        </div>
      </el-tab-pane>

      <el-tab-pane name="otherSharPanel">
        <span slot="label">
          <i class="icon-ym icon-ym-extend-trash" />他人共享</span>
        <div class="main JNPF-flex-main">
          <div class="JNPF-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item v-if="levelList.length>1">
                <a @click="jump(levelList[levelList.length-2],levelList.length-2)">返回上一级</a>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item,i) in levelList" :key="i">
                <span v-if="i+1>=levelList.length">{{item.fullName}}</span>
                <a v-else @click="jump(item,i)">{{item.fullName}}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="文件名">
                  <el-input v-model="keyword" placeholder="搜索我的文件" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()">
                    {{$t('common.search')}}</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <JNPF-table v-loading="listLoading" :data="list" @selection-change="handleSelectionChange"
            empty-text="该文件夹为空" size="mini">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="fullName" label="文件名">
              <template slot-scope="scope">
                <span v-if="scope.row.type">
                  <i :class='"icon-ym " + toFileExt(scope.row.fileExtension) + " i-default"' />
                  {{scope.row.fullName}}
                </span>
                <span class='cursor-pointer' v-else @click="openFolder(scope.row)">
                  <i class='icon-ym icon-ym-extend-folder text-warning' />
                  {{scope.row.fullName}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="90">
              <template slot-scope="scope">{{scope.row.fileTypNam}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" width="90">
              <template slot-scope="scope">{{scope.row.fileSize | toFileSize()}}</template>
            </el-table-column>
            <el-table-column prop="fileSize" label="版本" width="90">
              <template slot-scope="scope">{{scope.row.version}}</template>
            </el-table-column>
            <el-table-column prop="lastModifyTime" label="修改日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorTime" label="创建日期" :formatter="jnpf.tableDateFormat"
              width="120" />
            <el-table-column prop="creatorUserId" label="上传人员" width="90">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <!-- <template slot-scope="scope">
                <el-button size="mini" type="text" @click="recovery(scope.$index,scope.row.id)">
                  还原</el-button>
                <el-button size="mini" type="text" class="JNPF-table-delBtn"
                  @click="trashDel(scope.$index,scope.row.id)">删除</el-button>
              </template> -->
            </el-table-column>
          </JNPF-table>
          <pagination :total="total" :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize" @pagination="initData" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <userBox v-if="userBoxVisible" ref="userBox" @refresh="initData" />
    <folderTree v-if="folderTreeVisible" ref="folderTree" @refresh="initData" />
    <fileUploader ref="fileUploader" :parentId="parentId" @fileSuccess="fileSuccess" />
    <Preview :visible.sync="previewVisible" :file="activeFile" />

    <el-dialog title="版本列表" :visible.sync="dialogTableVisible">
      <el-table :data="versionList">
        <el-table-column property="fullName" label="文件名" width="250"></el-table-column>
        <el-table-column property="version" label="版本"></el-table-column>
        <el-table-column property="lastModifyTime" label="完成时间"
          :formatter="jnpf.tableDateFormat"></el-table-column>
        <el-table-column property="fileType" label="文件类型"></el-table-column>
        <el-table-column property="LastModifyUserId" label="完成人"></el-table-column>
        <el-table-column property="mainfetch" label="是否主版本"></el-table-column>

        <el-table-column label="操作" align="reght">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDownLoad(scope.row.vid)">下载</el-button>

            <el-button v-if="scope.row.mainfetch!='是'" size="mini" type="text"
              @click="handleSj(scope.row)">升级
            </el-button>

            <el-button size="mini" type="text" class="JNPF-table-delBtn"
              @click="handleBan(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import { AllList, Create, Delete, Download, DocumentInfo, ShareCancel, ShareOutList, ShareTomeList, TrashDelete, TrashList, TrashRecovery, Update } from '@/api/extend/document'
import userBox from './UserBox'
import folderTree from './FolderTree'
import FileUploader from './fileUploader'
import Preview from "./Preview";


export default {
  name: 'extend-document',
  components: { userBox, folderTree, FileUploader, Preview },
  data() {
    return {
      versionList: [],
      dialogTableVisible: false,
      userBoxVisible: false,
      folderTreeVisible: false,
      detailVisible: false,
      activeTab: 'myWord',
      keyword: '',
      total: 0,
      parentId: '0',
      listLoading: true,
      previewVisible: false,
      SelectionList: [],
      multipleSelection: {},
      list: [],
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc',
        sidx: ''
      },
      levelList: [{
        id: '0',
        fullName: '我的文档'
      }],
      activeFile: {
        fileId: '',
        name: '',
        url: '',
        fileVersionId: ''
      }
    }
  },
  watch: {
    activeTab(val) {
      console.log("===============" + val)
      if (val === 'myWord') {
        this.levelList = [{
          id: "0",
          fullName: '我的文档'
        }]
        this.parentId = "0"
      }
      this.reset()
    }
  },
  created() {
    this.initData()
  },
  methods: {
    reset() {
      this.list = []
      this.keyword = ''
      this.initData()
    },
    initData() {
      this.listLoading = true
      if (this.activeTab === 'myWord') {
        this.levelList[0].fullName = '我的文档'
      }
      if (this.activeTab === 'mysharePanel') {
        console.log("====" + this.levelList[0].fullName)
        this.levelList[0].fullName = '我共享的'

      }
      if (this.activeTab === 'startPanel') {
        this.levelList[0].fullName = '星标文件'

      }
      if (this.activeTab === 'finshedPanel') {
        this.levelList[0].fullName = '已完结文件'

      }
      if (this.activeTab === 'zybPanel') {
        this.levelList[0].fullName = '资源包'

      }
      if (this.activeTab === 'otherSharPanel') {
        this.levelList[0].fullName = '他人共享'
      }
      let query = {
        ...this.listQuery,
        activeTab: this.activeTab,
        keyword: this.keyword,
        parentId: this.parentId
      }
      AllList(query).then(res => {
        this.list = res.data.list
        this.total = res.data.pagination.total
        this.listLoading = false
      })
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc',
        sidx: ''
      }
      this.initData()
    },
    //我的文档删除
    handleDel() {
      if (this.SelectionList.length < 1) {
        this.$message({
          type: 'error',
          message: '请先选择文件'
        });
        return;
      }
      const docids = this.SelectionList.toString()
      this.$confirm('您确定删除选中的文件吗?', '提示', {
        type: 'warning'
      }).then(() => {
        TrashDelete(docids).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.search()
        })
      }).catch(() => { });
    },
    // 删除版本
    handleBan(obj) {
      this.$confirm('您确定删除版本吗?', '提示', {
        type: 'warning'
      }).then(() => {
        request({
          url: `/api/extend/Document/versiondel/${obj.vid}`,
          method: "get",

        }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.editversion(obj.id)
        });
      })
    },
    // 升级版本
    handleSj(obj) {
      this.$confirm('您确定升级版本吗?', '提示', {
        type: 'warning'
      }).then(() => {
        request({
          url: `/api/extend/Document/versionLv/${obj.vid}`,
          method: "get",

        }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.editversion(obj.id)
        });
      })
    },
    //取消共享
    unshare(index, id) {
      this.$confirm('您确定要取消共享, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        ShareCancel(id).then(res => {
          this.list.splice(index, 1);
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.search()
        })
      }).catch(() => { });
    },

    //
    recovery(index, id) {
      this.$confirm('您确定要还原选中的文件?', '提示', {
        type: 'warning'
      }).then(() => {
        TrashRecovery(id).then(res => {
          this.list.splice(index, 1);
          this.$message({
            type: 'success',
            message: res.msg
          });
        })
      }).catch(() => { });
    },
    //
    trashDel(index, id) {
      this.$confirm('文件删除后将无法恢复，您确定要彻底删除所选文件吗?', '提示', {
        type: 'warning'
      }).then(() => {
        TrashDelete(id).then(res => {
          this.list.splice(index, 1);
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.search()
        })
      }).catch(() => { });
    },
    //yido
    moveTo(id, parentId) {
      this.folderTreeVisible = true
      this.$nextTick(() => {
        this.$refs.folderTree.init(id, parentId)
      })
    },
    //编辑文件
    editFile(vid) {
      POBrowser.openWindow('/showDoc/' + vid, 'width=1150px;height=900px;');
    },
    //星标文件
    startFile() {
      if (this.SelectionList.length < 1) {
        this.$message({
          type: 'error',
          message: '请先选择文件'
        });
        return;
      }
      request({
        url: `/api/extend/Document/startFile/add`,
        method: "POST",
        data: {
          "docids": this.SelectionList.toString()
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        });
        this.search()
      });
    },
    //取消星标
    unstartFile(id) {
      request({
        url: `/api/extend/Document/startFile/del`,
        method: "POST",
        data: {
          "docids": id
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        });
        this.search()
      });
    },
    //提交审核
    submitWork(vid) {
      request({
        url: `/api/extend/Document/submitWorkFlow/${vid}`,
        method: "GET"
      }).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        });
        this.search()
      });
    },
    //版本管理
    editversion(docid) {
      request({
        url: `/api/extend/Document/docversionList/${docid}`,
        method: "GET"
      }).then(res => {
        this.versionList = res.data
        console.log(this.versionList)
        if (res.data.length > 0) {
          this.dialogTableVisible = true
        } else {
          this.$message({
            type: 'error',
            message: '暂无版本列表'
          });
        }
      });

    },
    //共享文件
    shareFolder() {
      if (this.SelectionList.length < 1) {
        this.$message({
          type: 'error',
          message: '请先选择文件'
        });
        return;
      }
      let ids = this.SelectionList.toString()
      this.userBoxVisible = true
      this.$nextTick(() => {
        this.$refs.userBox.init(ids)
      })
      this.search()
    },
    //共享所有人
    shareFolderAll() {
      if (this.SelectionList.length < 1) {
        this.$message({
          type: 'error',
          message: '请先选择文件'
        });
        return;
      }
      request({
        url: `/api/extend/Document/Actions/Share/add`,
        method: "POST",
        data: {
          "userId": "",
          "docids": this.SelectionList.toString()
        }
      }).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        });
        this.search()
      });
    },

    getFolder(id) {
      DocumentInfo(id).then(res => {
        this.addFolder(res.data)
      })
    },
    // 新建文件夹
    addFolder(info) {
      let inputValue = ""
      if (info) { inputValue = info.fullName }
      let title = info ? (info.type ? '重命名文件' : '重命名文件夹') : '新建文件夹'
      this.$prompt('', title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '输入名称',
        inputErrorMessage: '请正确输入文件夹名称',
        inputValue: inputValue,
        // inputPattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
        closeOnClickModal: false
      }).then(({ value }) => {
        let data = {
          type: info && info.type ? info.type : "0",
          parentId: this.parentId,
          fullName: value
        }
        if (info && info.id) {
          Object.assign(data, { id: info.id })
          Update(data).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.initData()
          })
        } else {
          Create(data).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.initData()
          })
        }
      }).catch(() => { });
    },
    uploadFile() {
      this.$refs.fileUploader && this.$refs.fileUploader.openUploader()
    },
    fileSuccess() {
      this.reset()
    },
    //预览文件
    handlepreview(row) {
      this.activeFile.name = row.fullName;
      this.activeFile.fileId = row.filePath;
      this.activeFile.fileVersionId = null;
      this.activeFile.url = row.uploaderUrl;
      this.previewVisible = true;
    },
    // 下载文件
    handleDownLoad(vid) {
      window.open(
        '/dev/api/extend/Document/Download/' + vid,
        '_self'
      );
    },
    //选择多行数据
    handleSelectionChange(val) {
      // val拿到的是选中行的全部数据，而this.multipleSelection是把val以对象装在数组中
      this.multipleSelection = val;
      console.log(this.multipleSelection);
      // 每次都清空存储的数据，并装入新数据
      this.SelectionList = [];
      for (const val of this.multipleSelection) {
        for (const key in val) {
          if (key === "id") {
            this.SelectionList.push(val[key]);
          }
        }
      }
      // 在遍历之后转换为字符串，因为这里后端要的值只有行id，因此就全部转为字符串后发给后端
      this.ROWids = this.SelectionList.toString();
      console.log("this.ROWids", this.ROWids);
    },
    // 打开文件夹
    openFolder(item) {
      this.parentId = item.id
      this.levelList.push(item)
      this.reset()
    },
    jump(item, i) {
      this.parentId = item.id
      this.reset()
      this.levelList = this.levelList.slice(0, i + 1)
    },
    toFileExt(ext) {
      if (ext) ext = ext.replace('.', '')
      if (ext == "doc" || ext == "docx") {
        return "icon-ym-file-word";
      }
      if (ext == "xls" || ext == "xlsx") {
        return "icon-ym-file-excel";
      }
      if (ext == "ppt" || ext == "pptx") {
        return "icon-ym-file-ppt";
      }
      if (ext == "rar" || ext == "zip") {
        return "icon-ym-file-zip";
      }
      if (ext == "txt" || ext == "log") {
        return "icon-ym-file-text";
      }
      if (ext == "html" || ext == "cs" || ext == "xml") {
        return "icon-ym-file-code";
      }
      if (ext == "gif" || ext == "jpg" || ext == "jpeg" || ext == "bmp" || ext == "png") {
        return "icon-ym-file-image1";
      }
      if (ext == "pdf") {
        return "icon-ym-file-pdf";
      }
      if (ext == "mp3") {
        return "icon-ym-file-audio";
      }
      if (ext == "mp4") {
        return "icon-ym-file-movie";
      }
      return "icon-ym-file-blank";
    },
  }
}
</script>
<style lang="scss" scoped>
.Document-container {
  position: relative;
  .JNPF-common-search-box {
    margin-bottom: 0;
    padding-left: 0;
  }
  .JNPF-common-head {
    padding: 14px 0 10px;
  }
  >>> .el-tabs__item {
    text-align: left !important;
    width: 160px;
    .icon-ym {
      font-size: 14px;
      margin-right: 8px;
    }
  }
  >>> .el-tabs__content {
    height: 100%;
    .el-tab-pane {
      height: 100%;
      overflow: hidden;
    }
  }
  .main {
    height: 100%;
    .icon-ym {
      font-size: 14px;
    }
    .cursor-pointer {
      cursor: pointer;
    }
  }
}
</style>
